<template>
  <div>
    <h1>home</h1>
    <p>
      {{gettersUsername}}
    </p>
    <p>
      {{gettersHomeData}}
    </p>
    <pre>
      {{ userdata }}
  </pre
    >
    <router-link to="/login">go_login</router-link>
    <router-link to="/member">go_member</router-link>
       <router-link to="/home/formChilren">go_formChilren</router-link>
              <router-link to="/home/newpage">newpage</router-link>
    

    <el-button @click="asyncUserdata">
      异步获取userdata
    </el-button>

    <div>
      <h2>home的子路由</h2>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
// state getters 在计算属性中解构
// mutations actions 在methods 中解构
export default {
  computed: {
    ...mapState("user", ["userdata"]),
    ...mapGetters("user",["gettersUsername","gettersHomeData"])
  },
  methods:{
    ...mapActions("user",["asyncGetUserdata"]),
    asyncUserdata(){
      this.asyncGetUserdata()
    }
  }
};
</script>

<style>
</style>